<!-- 企业对象管理 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">企业对象管理</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          class="m-20px pl-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="企业名称">
            <el-input v-model.trim="qymc" placeholder="请输入企业名称" />
          </el-form-item>
          <el-form-item label="企业类型">
            <el-select v-model="qylx" placeholder="请选择企业类型">
              <el-option
                v-for="item in qylxOption"
                :key="item.dm"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>

          <div class="mt-2px float-right">
            <el-button
              type="primary"
              class="w-80px rounded-15px"
              :icon="Search"
              @click="loadTableData"
              >查询</el-button
            >
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetSearch"
              >重置</el-button
            >
          </div>
        </el-form>

        <!--表格 -->
        <div class="text-right mr-20px mb-10px">
          <el-button type="primary" class="w-80px rounded-15px" :icon="Plus" @click="openDialog"
            >新增</el-button
          >
          <el-button
            type="primary"
            class="w-80px rounded-15px"
            :icon="Download"
            @click="exportExcel"
            >导出</el-button
          >
        </div>
        <Table
          class="mt-20px"
          style="height: calc(100% - 200px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #zcrqColumn="{ row }">
            <span>{{ row.zcrq && moment(row.zcrq).format('YYYY-MM-DD') }}</span>
          </template>
          <template #qylxColumn="{ row }">
            <span>{{ formatZbmc(row.qylx) }}</span>
          </template>

          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="queryDialog(row)">查看</el-button>
              <el-button link type="danger" @click="deleteData">删除</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="企业对象详情查看" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in dialogFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item>
            <template #label>
              <span v-if="item.required && !inputDisabled" style="color: #f56c6c; margin-right: 4px"
                >*</span
              >
              <span>{{ item.label }}</span>
            </template>

            <el-input
              v-if="item.type === 'input'"
              v-model.trim="item.value"
              :type="item.type"
              :disabled="inputDisabled"
            ></el-input>

            <el-date-picker
              v-else-if="item.type === 'date'"
              v-model="item.value"
              style="width: 100%"
              type="date"
              :disabled="inputDisabled"
              @change="item.value = moment(item.value).format('YYYY-MM-DD HH:mm:ss')"
            />

            <el-select
              v-else-if="item.prop === 'qylx'"
              v-model="item.value"
              style="width: 100%"
              :disabled="inputDisabled"
              :placeholder="inputDisabled ? ' ' : '请选择'"
            >
              <el-option
                v-for="item in qylxOption"
                :key="item.dm"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!inputDisabled" class="mt-20px text-right">
      <el-button class="w-80px h-40px" @click="dialogShow = false">取消</el-button>
      <el-button type="primary" class="w-80px h-40px" @click="addData">保存</el-button>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
import moment from 'moment'
import * as XLSX from 'xlsx'

//搜索参数
const pageNo = ref(1)
const pageSize = ref(10)
const tableTotal = ref(0)
const qymc = ref('')
const qylx = ref('')

const resetSearch = () => {
  qymc.value = ''
  qylx.value = ''

  loadTableData()
}

//字典查询
const qylxOption: any = ref([]) //企业类型
function getDictionary() {
  queryZdInfo({ zdxdm: 'qylx' }).then((res: any) => {
    qylxOption.value = res
  })
}
getDictionary()

// 定义列配置
const tableColumns = [
  {
    type: 'index',
    label: '序号',
    width: '80',
  },
  {
    prop: 'qymc',
    label: '企业名称',
    width: 240,
  },
  {
    slotName: 'qylxColumn',
    type: 'slot',
    label: '企业类型',
  },
  {
    prop: 'qyjj',
    label: '企业简介',
    width: 240,
  },
  {
    prop: 'sshy',
    label: '所属行业',
    width: 160,
  },
  {
    prop: 'tyshxydm',
    label: '企业社会信用代码',
    width: 200,
  },
  {
    slotName: 'zcrqColumn',
    type: 'slot',
    label: '企业注册日期',
  },
  {
    prop: 'frdb',
    label: '企业法人代表',
  },
  {
    prop: 'lxdh',
    label: '联系电话',
  },
  {
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]
const tableData = ref([])

/** ----- 加载table数据 ----- */
//处理企业类型
const formatZbmc = computed(() => {
  return (zbmc: any) => {
    if (zbmc) {
      let result = ''
      qylxOption.value.forEach((item: any) => {
        if (item.dm === zbmc) {
          result = item.mc
        }
      })
      return result
    }
    return ''
  }
})

function loadTableData() {
  const params = {
    qymcVal: qymc.value,
    qylx: qylx.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }

  qyxx(params).then((res: any) => {
    tableData.value = res.records

    pageNo.value = res.current
    pageSize.value = res.size
    tableTotal.value = res.total
  })
}
loadTableData()

//分页查询
const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadTableData()
}
const handleCurrentChange = (val: number) => {
  pageNo.value = val
  loadTableData()
}

//导出
const exportExcel = async () => {
  let fdArrayList: any = []
  const data = {
    qymcVal: qymc.value,
    qylx: qylx.value,
    pageNo: 1,
    pageSize: 5000,
  }
  await qyxx(data).then((res: any) => {
    fdArrayList = res.records
  })
  const fdArray: any = []
  fdArrayList.forEach(function (data: any, index: any) {
    const obj = {
      序号: index + 1,
      企业名称: data.qymc,
      企业类型: data.qylx,
      企业简介: data.qyjj,
      所属行业: data.sshy,
      企业社会信用代码: data.tyshxydm,
      企业注册日期: data.zcrq,
      企业法人代表: data.frdb,
      联系电话: data.lxdh,
    }
    fdArray.push(obj)
  })
  // 新建一个excel.xlsx
  const wb = XLSX.utils.book_new()
  // //封装JSON 数据
  const fdXslxws = XLSX.utils.json_to_sheet(fdArray)
  XLSX.utils.book_append_sheet(wb, fdXslxws, 'sheet')
  XLSX.writeFile(wb, '企业对象管理' + '.xlsx')
  ElMessage({ message: '导出成功！', type: 'success' })
}

//弹窗信息
const dialogShow = ref(false)
const inputDisabled = ref(true)
const dialogFormList = reactive([
  {
    formLabelText: '',
    formLabelWidth: '160px',
    formList: [
      {
        prop: 'qymc',
        required: true,
        label: '企业名称',
        type: 'input',
        value: '',
      },
      {
        prop: 'qylx',
        required: true,
        label: '企业类型',
        type: 'select',
        value: '',
      },
      {
        prop: 'qyjj',
        label: '企业简介',
        type: 'input',
        value: '',
      },
      {
        prop: 'sshy',
        label: '所属行业',
        type: 'input',
        value: '',
      },
      {
        prop: 'tyshxydm',
        label: '企业社会信用代码',
        type: 'input',
        value: '',
      },
      {
        prop: 'zcrq',
        label: '企业注册日期',
        type: 'date',
        value: '',
      },
      // {
      //   prop: 'jd',
      //   label: '经度',
      //   type: 'input',
      //   value: '',
      // },
      // {
      //   prop: 'wd',
      //   label: '纬度',
      //   type: 'input',
      //   value: '',
      // },
      {
        prop: 'frdb',
        label: '企业法人代表',
        type: 'input',
        value: '',
      },
      {
        prop: 'lxdh',
        label: '联系电话',
        type: 'input',
        value: '',
      },
    ],
  },
])

//打开弹窗
const openDialog = () => {
  dialogFormList[0].formList.forEach((item: any) => {
    item.value = ''
  })
  inputDisabled.value = false
  dialogShow.value = true
}

//新增数据
const addData = () => {
  let data: any = dialogFormList[0].formList.map((item: any) => {
    return { [item.prop]: item.value }
  })
  data = data.reduce((acc: any, cur: any) => {
    const key = Object.keys(cur)[0] // 获取对象的键名
    const value = cur[key] // 获取对象的键值
    acc[key] = value // 将键和对应的值添加到累加器对象中
    return acc // 返回累加器对象
  }, {})

  //校验
  if (!data.qymc) {
    return ElMessage.warning('请填写企业名称')
  } else if (!data.qylx) {
    return ElMessage.warning('请选择企业类型')
  }

  qyxxInsertOrUpdate(data)
    .then((res) => {
      dialogShow.value = false
      ElMessage.success('新增成功')
      resetSearch()
    })
    .catch((err) => {
      dialogShow.value = false
      ElMessage.error('新增失败')
    })
}

//查询弹窗信息
const queryDialog = (row: any) => {
  queryQyxxInfo({ key: row.id }).then((res: any) => {
    for (const key in res) {
      dialogFormList[0].formList.forEach((item: any) => {
        if (key === item.prop) {
          item.value = res[key]
        }
      })
    }
    inputDisabled.value = true
    dialogShow.value = true
  })
}

const deleteData = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}
</script>

<style></style>
